.@{mi-canvas} {
	&-palette {
		transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
		will-change: transform;

		.@{poptip-prefix-cls} {
			&-body {
				padding: 16px 32px;
			}
		}

		&-active-color {
			width: 22px;
			height: 22px;
			border-radius: 22px;
			background: #000;
			border: 2px solid #5c5c5c;
			cursor: pointer;
		}

		&-default {
			width: 288px;
			position: absolute;
			margin-top: 4px;
		}

		&-swatches {
			display: grid;
			grid-auto-rows: 64px;
			grid-template-columns: repeat(6, 48px);
		}

		&-color {
			.flex();
			width: 100%;
			height: 100%;

			.@{radio-prefix-cls} {
				opacity: 0;
				margin-right: 0;
				width: 24px;
				height: 24px;
				position: absolute;
				transform: translate(-5px, -3px);
				&-wrapper {
					margin-right: 0;
					.flex();

					.@{tooltip-prefix-cls} {
						.flex();
					}
				}
			}

			&-item {
				width: 24px;
				height: 24px;
				position: relative;
				box-sizing: border-box;
				cursor: pointer;
				border-radius: 50%;
				-webkit-tap-highlight-color: transparent;
				display: block;
				transition: all .2s ease-in-out;
				&[name="#ffffff"] {
					border: 1px solid #E8EAED;
				}
			}

			.@{radio-prefix-cls} {
				&-checked + span.@{mi-canvas}-palette-color-item {
					width: 36px;
					height: 36px;
					box-shadow: 0 0 10px #969696;
				}
			}
		}

		&-picker {
			width: 288px !important;
			.border-radius(2) !important;
			outline: none;
			box-shadow: none !important;

			.vc-chrome {
				padding: 0 4px;
			}

			.vc-chrome-saturation-wrap {
				.border-radius(2);

				.vc-saturation {
					.border-radius(2.5);
				}

				.vc-saturation-circle {
					width: 24px;
					height: 24px;
					box-shadow: 0 0 0 4px #FFF, 0 0 0 5px #1A73EB, 0 0 rgba(0, 0, 0, 0);
				}
			}

			.vc-chrome-body {
				padding: 24px 0 0;
			}

			.vc-chrome-active-color,
			.vc-chrome-color-wrap .vc-checkerboard {
				width: 24px;
				height: 24px;
			}

			.vc-chrome-color-wrap {
				display: none;
			}

			.vc-chrome-hue-wrap {
				margin-bottom: 0;
				height: 24px;

				.vc-hue {
					.border-radius(2);
				}

				.vc-hue-picker {
					width: 24px;
					height: 24px;
					.border-radius(6);
					background: transparent;
					box-shadow: 0 0 0 4px #FFF, 0 0 0 5px #1A73EB, 0 0 rgba(0, 0, 0, 0);
					transform: translate(0, -1px);
					-webkit-appearance: none;
					appearance: none;
					-webkit-tap-highlight-color: transparent;
					border: initial;
				}

				.vc-hue--horizontal {
					background: linear-gradient(to right, #FF0000 4.17%, #FFFF00 19.44%, #00FF00 34.72%, #00FFFF 50%, #0000FF 65.28%, #FF00FF 80.56%, #FF0000 95.83%);

					.vc-hue-container {
						width: 260px;
					}
				}
			}
			.vc-chrome-alpha-wrap {
				display: none;
			}

			.vc-chrome-toggle-btn {
				display: none;
			}

			.vc-chrome-fields-wrap {
				margin-top: 8px;
			}

			.vc-chrome-fields  {
				.vc-input__input {
					background: #F1F3F3;
					height: 30px;
					box-shadow: none;
					outline: none;
					.border-radius(2);
				}
				.vc-input__label {
					display: none;
				}
			}
		}

		&&-mobile {
			.@{mi-canvas} {
				&-palette {
					&-swatches {
						grid-auto-rows: 53px;
						grid-template-columns: repeat(6, 36px);
					}

					&-picker {
						width: 216px !important;
					}

					&-color {
						&-item {
							width: 20px;
							height: 20px;
						}

						.@{radio-prefix-cls} {
							&-checked + span.@{mi-canvas}-palette-color-item {
								width: 32px;
								height: 32px;
								box-shadow: 0 0 10px #969696;
							}
						}
					}
				}
			}
		}
	}
}
